<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <my-component-li v-for="item in items" v-bind:ni="item"></my-component-li>
    </ul>
</div>
</body>

<script src="vue.js"></script>

<script>
    // 先注册组件
    // v-for="item in items" ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数 量的组件；
    // v-bind:item="item" ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属 性上；
    //= 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值；
    Vue.component('my-component-li', {
        props:['ni'],
        template: '<li>Hello   {{ni}}</li>'
    });
    // 再实例化 Vue
    var vm = new Vue({
        el: '#app', data: {
            items: ["张三", "李四", "王五"]
        }
    });
</script>
</html>